<template>
  <div id="home-list">
    <div class="content" v-for="(item,index) in ListData[0]" :key="index">
      <p class="name">{{item.name}}</p>
      <van-cell v-for="(item1,index1) in item" :key="index1">
        <template #default>
          <div class="big" >
            <!-- {{item1.list}} -->
            <img :src="item1.teacher_avatar" alt="">
            <div class="wenzi">
              <p>{{item1.teacher_name}}</p>
              <p class="bot">{{item1.introduction}}</p>
            </div> 
          </div>
        </template>
      </van-cell>
    </div>
    <div class="content" v-for="(item,index) in ListData[1]" :key="index">
      <p class="name">{{item.name}}</p>
      <van-cell v-for="(item1,index) in item" :key="index">
        <template #default>
          <p class="title">{{item1.title}}</p><span>共1课时</span>
          <div class="big1" v-for="(item2, index) in item1.teachers_list" :key="index">
            <img :src="item2.teacher_avatar" alt="">
            <div class="wenzi1">
              <p class="bot1">{{item2.teacher_name}}</p>
            </div> 
          </div>
          <div class="data">
            <div class="num">{{item1.sales_num}}人报名</div>
            <div class="price">{{item1.price}}</div>
          </div>
        </template>
      </van-cell>
      
    </div>
    <div class="content" v-for="(item,index) in ListData[2]" :key="index">
      <p class="name">{{item.name}}</p>
      <van-cell v-for="(item1,index1) in item" :key="index1">
        <template #default>
          <div class="big" >
            <!-- {{item1.list}} -->
            <img :src="item1.teacher_avatar" alt="">
            <div class="wenzi">
              <p>{{item1.teacher_name}}</p>
              <p class="bot">{{item1.introduction}}</p>
            </div> 
          </div>
        </template>
      </van-cell>
    </div>
    
  </div>
</template>

<script>
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';
import "vant/lib/cell/style"

Vue.use(Cell);
Vue.use(CellGroup);
export default {
  name:"HomeList",
  data() {
    return {
      ListData:[]
    }
  },
  created() {
    this.$http({
      url:"/api/app/recommend/appIndex",
      methods:"get"
    }).then((res)=>{
      console.log(res.data.data);
      
      this.ListData=res.data.data
      // console.log(this.ListData) 
    })
  },
}
</script>

<style scoped>
  #home-list{
    margin-bottom: 70px;
  }
  .van-cell{
    width: 95%;
    margin: 0 auto;
    margin-bottom: 8px;
    margin-top: 8px;
  }
  img{
    width: 40px;
    height: 40px;
    margin-top: 10px;
    border-radius: 50px;
  }
  .big{
    display: flex;
    height: 65px;
    line-height: 30px;
   
    
  }
  .wenzi{
    width: 50px;
    flex: 1;
    margin-left: 9px;
  }
  .bot{
    font-size: 12px;
    color: #8c8c8c;
  }
  .big1{
    display: flex;
    height: auto;
    line-height: 65px;
  }
  .wenzi1{
    flex: 1;
    color: #8c8c8c;
    margin-left: 9px;
  }
  .name{
    display: inline-block;
    margin: 10px 0;
    font-size: 18px;
    border-left: 2px solid red;
    margin-left: 10px;
    padding-left: 5px;
  }
  .title{
    font-size: 18px;
  }
  span{
    color: #8c8c8c;
  }
  .data{
    display: flex;
    justify-content: space-between;
  }
  .num{
    color: #8c8c8c;
  }
  .price{
    color: red;
  }
</style>